<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件通讯 父传子 通过props</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
     <cpn :c-info="info" :child-message="message"></cpn>
    </div>
   <template id="cpn">
       <div>
           <h2>{{ cInfo }}</h2>
           <h2>{{childMessage}}</h2>
       </div>
   </template>

    <script>
       const cpn = {
           template: '#cpn',
       
            props: {//在子组件里面定义一些属性，用v-bind绑定到父组件里的数据
              cInfo: {
                   type: Object,
                   default() {
                       return {}
                   }
               },
               childMessage: {
                   type: String,
                   default: ''
               }
            },

           data() {
                return {

                }
           },
           methods: {

           }
       }
      
        const app = new Vue({
            el: "#app",
            data: {
              info: {
                  name: 'DIO',
                  age: 200,
                  height: 1.88
              },
              message: 'aaaa'
            },
            components: {
              cpn
            }
        })
    </script>
</body>
</html>